import React, { useEffect, useRef, useState } from "react";
import { Form, Input, Upload, Button, message, FormInstance } from "antd";
import "./UserInfo.css";
import { getMyInfo, updateInfo } from "@/api/userAPi";
import { userInfoType } from "@/types/userType";
import { getTokenAUTH } from "@/utils/service/auth";

const UserInfo: React.FC = () => {
  const { TextArea } = Input;
  const [userInfo, setUserInfo] = useState<userInfoType>();
  const form = useRef<FormInstance>(null);
  const updateUserInfo = (values: any) => {
    updateInfo(values).then((res) => {
      message.success(res.msg);
    });
  };
  const uploadChange = (info: any) => {
    if (info.file.status === "done") {
      const { response } = info.file;
      if (response.code === 200) {
        message.success(response.msg);
        getInfo();
      } else {
        message.error(response.msg);
      }
    }
  };
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
  };

  const getInfo = async () => {
    const res = await getMyInfo();
    if (res.code === 200) {
      const { user_remark, user_nickname } = res.data?.user;
      setUserInfo(res.data?.user)
      form.current?.setFieldsValue({
        user_remark,
        user_nickname,
      });
    }
    return res;
  };
  useEffect(() => {
    getInfo();
  }, []);

  return (
    <div className={"user-box"}>
      {/*用户头像*/}
      <Upload
        action={"http://localhost:8000/user/upload"}
        onChange={uploadChange}
        headers={{ token: getTokenAUTH() }}
        showUploadList={false}
        maxCount={1}
      >
        <div className={"user-img"}>
          <img src={`http://localhost:8000${userInfo?.user_image}`} alt="" />
        </div>
      </Upload>

      {/*id*/}
      <div className={"user-id"}>
        <span>UID {userInfo?.user_id}</span>
      </div>
      {/*表单*/}
      <div>
        <Form
          {...layout}
          ref={form}
          onFinish={updateUserInfo}
          className={"form"}
        >
          <Form.Item
            label={"昵称"}
            required={true}
            name={"user_nickname"}
            style={{ height: "29px" }}
            initialValue={userInfo?.user_nickname}
            rules={[{ required: true, message: "昵称不能为空" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={"密码"}
            name={"user_password"}
            style={{ height: "29px" }}
          >
            <Input placeholder={"不修改请不要填写"} />
          </Form.Item>

          <Form.Item
            label={"签名"}
            name={"user_remark"}
            initialValue={userInfo?.user_remark}
            style={{ minHeight: "29px" }}
          >
            <TextArea />
          </Form.Item>

          <div className={"form-button"}>
            <Button type="primary" danger>
              注销
            </Button>
            <Button type="primary" htmlType={"submit"}>
              更新资料
            </Button>
          </div>
        </Form>
      </div>
    </div>
  );
};
export default UserInfo;
